<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>复利计算器</title>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
    	
    </script>
</head>
<body>
	<header>
		复利计算器
	</header>
	<main>
		<p><span>START</span> <input v-model="start" @input="changeStatus()" ></p>
		<p><span>NOW</span> <input v-model="now" @input="changeStatus()" /></p>
		<p><span>END</span> <input v-model="end" @input="changeStatus()" /></p>
		
		<p v-show="!percentInput" @click="percentInput=true" style="text-align: center;">已完成 {{percent}}%</p>
		<p v-show="percentInput"><span @click="percentInput=false">PERCENT</span> <input v-model="percent" @input="changePercent()" /></p>
		
		
	</main>
	<script type="text/javascript">
		var vue = new Vue({
			el: "main",
			data:{
				percent: 0,
				start: "",
				now: "",
				end: "",
				percentInput: false
			},
			methods:{
				changeStatus: function(){
					var start = + this.start;
					var now = + this.now;
					var end = +this.end;
					
					var storiedObj = {"start": start, "now": now, "end": end};
					localStorage.setItem("CACHE", JSON.stringify(storiedObj));
					
					var ans = Math.log(now / start) / Math.log(end / start);
					var percent = ans * 100;
					this.percent = percent.toFixed(2);
				},
				changePercent: function(){
					var start = +this.start;
					var end = +this.end;
					var percent = +this.percent;
					
					var now = Math.pow((end / start), percent / 100) * start;
					now = now.toFixed(2);
					
					var storiedObj = {"start": start, "now": now, "end": end};
					localStorage.setItem("CACHE", JSON.stringify(storiedObj));
					
					this.now = now;
				}
			}
		});
		
		(function(){
			var storiedObj = localStorage.getItem("CACHE");
			if(storiedObj){
				storiedObj = JSON.parse(storiedObj);
				vue.start = storiedObj.start;
				vue.now = storiedObj.now;
				vue.end = storiedObj.end;
				
				vue.changeStatus();
			}
		})();
	</script>
</body>
</html>
